<template>
  <!--<transition v-show="visible" name="van-fade"  mode="out-in" translate="yes">-->
    <div v-show="visible"  style="height:100%">
      <v-navbar :navinfo="navinfo"></v-navbar>
      <div  :style="{'height':slide_h*0.05+'px','line-height':slide_h*0.1+'px'}" class="text-center title24">
      </div>
      <van-row id="loginView"  >
        <van-col offset="1" span="22">
          <van-field
            v-model="ruleForm.userName"
            clearable
            label="账 号"
            required
            minlength="6"
            maxlength="20"
            placeholder="请填写手机号"
          />
          <div style="height:10px;"></div>
          <van-field
            v-model="ruleForm.password"
            type="password"
            label="密 码"
            minlength="6"
            maxlength="20"
            clearable
            required
            placeholder="请输入密码"
          />
          <div style="height:10px;"></div>
          <van-field
            v-model="ruleForm.nickName"
            type="text"
            label="昵 称"
            clearable
            required
            placeholder="请输入昵称"
          />
          <div style="height:10px;"></div>
          <van-cell-group>
            <van-field
              v-model="ruleForm.rand"
              center
              clearable
              required
              label="验证码"
              placeholder="请输入验证码"
              @right-click-icon="changeCode()"
            >
              <van-button class="transparent border0" slot="button" @click="changeCode" size="small" ><img  class="captcha" :src="captcheurl"/></van-button>
            </van-field>
          </van-cell-group>
          <div class="p-tb5"></div>
          <div class="p-lr10">
            <van-button @click="submitForm()" size="large" type="primary">立 即 注 册</van-button>
          </div>
        </van-col>
      </van-row>
    </div>
</template>
<script type="es6">
  const navbar = () =>
    import ('@/components/header/NavBar')
  export default {
    components: {
      'v-navbar': navbar,
    },
    data() {
      return {
        visible:false,
        slide_h:(window.document.body.offsetHeight),
        navinfo:{title: '用户注册', leftText: '返回',leftIcon:'', leftLink:'', rightText: '',rightIcon:'',rightLink:'',name:'signup',activeicon:'star-o',icon:'star'},
        captcheurl: '',
        ruleForm: {
          userName: '',
          password: '',
          rand: '',
          inviteCode:'',
          nickName:''
        }
      }
    },
    methods: {
      submitForm() {
        if(this.ruleForm.userName==''){
          this.proUtil.msgWarning("账号不能为空");
          return;
        }
        if(!this.proUtil.validFromat.ismobile(this.ruleForm.userName)){
          this.proUtil.msgWarning("账号格式不正确")
          return;
        }
        if(this.ruleForm.password==''){
          this.proUtil.msgWarning("密码不能为空");
          return;
        }
        if(this.ruleForm.nickName==''){
          this.proUtil.msgWarning("昵称不能为空");
          return;
        }
        // if(this.$store.getters.getConfig().registerInviteLocked=="0"&&this.ruleForm.inviteCode==''){
        //   this.proUtil.msgWarning("邀请码不能为空");
        //   return;
        // }
        if(this.ruleForm.rand==''){
          this.proUtil.msgWarning("验证码不能为空");
          return;
        }
        var m = {
          userName: this.ruleForm.userName,
          password: this.proUtil.md5(this.proUtil.md5(this.ruleForm.password)),
          rand: this.ruleForm.rand,
          inviteCode:this.ruleForm.inviteCode,
          nickName:this.ruleForm.nickName
        };
        this.$store.commit("saveLoadingMap",{"target":this.proAPI.URLS.sign,lock:1,text:"正在注册...",background:"rgba(0,0,0,0.6)"});
        this.proAPI.postJson(this.proAPI.URLS.sign, m).then((res) => {
          this.proUtil.msgSuccess(res.message);
          this.$router.replace("/login");
        })
      },
      changeCode() {
        this.captcheurl = process.env.BASE_API + this.proAPI.URLS.getLoginCaptcha + "?t=" + new Date().getTime()
      },
      setDialoginfo(data){
        this.ruleForm.inviteCode=data.inviteCode
      },
    },
    mounted() {
      console.log(this.$router);
      console.log(this.$route.matched.length);
      this.changeCode();
      setTimeout(()=>{
        this.visible=true;
      },500)
    },
    beforeRouteEnter(to,from,next){
      if(to.query.invitCode!==null){
        next(vm =>vm.setDialoginfo(to.query));
      }else{
        next();
      }
    }
  }
</script>
<style scoped>
  .captcha {
    vertical-align: middle;
    width:84px;
    height:100%;
  }
  .van-button--small{
    padding:0
  }
</style>
